<template>
  <div id="page-honor-manage-list">
    <div class="m10 clearfix">
      <Button type="info" class="fr" @click="showCreateModal()">新增荣誉</Button>
    </div>

    <div class="employee-list pic-list clearfix" v-if="list && list.length > 0">
      <Card class="pic" v-for="(item, index) in list" :key="index">
        <div>
            <div class="avator-bg avator-bg-md"
              v-if="item.photoPath"
              :style="{ backgroundImage: 'url(' + splitImg(item.photoPath)[0].url + ')', margin: '0 auto' }">
            </div>
            <div class="avator-bg avator-bg-md"
              v-else>
            </div>
            <Form label-position="left" :label-width="80" class="mt20">
              <FormItem label="荣誉名称:">{{ item.honorName }}</FormItem>
              <FormItem label="描述:">{{ item.description }}</FormItem>
            </Form>
            <div class="handler">
              <span @click="showUpdateModal(item)"><Icon type="edit"></Icon></span>
            </div>
        </div>
      </Card>
    </div>
    <div v-else class="empty-con">
      <i></i>
      <p>该筛选条件下没有任何内容</p>
    </div>

    <div class="m10 clearfix" v-if="page.total > 0">
      <div class="fr">
        <Page
          show-total
          :total="page.total"
          :current="query.currentPage"
          @on-change="onChangePage">
        </Page>
      </div>
    </div>

    <update-honor-modal :form="modal" @submit="getHonorList"></update-honor-modal>
  </div>
</template>

<script>
  import Vue from 'vue'
  import clubApi from '@/api/club'
  import updateHonorModal from './update-honor-modal'

  export default {
    name: 'honor-list',
    components: {
      updateHonorModal
    },
    data () {
      return {
        modal: {
          visible: false,
          data: {
          }
        },
        query: {
          currentPage: 1,
          limit: 10
        },
        page: {
          total: 0
        },
        list: []
      }
    },
    watch: {
      'query.currentPage': 'getHonorList'
    },
    methods: {
      splitImg (str) {
        return Vue.filter('splitImg')(str || '', 0)
      },
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      async getHonorList () {
        const { body } = await clubApi.getHonorList(this.query)
        this.list = body.responseData.content
        this.page.total = body.responseData.totalElements
      },
      showCreateModal () {
        this.modal.visible = true
      },
      showUpdateModal (detail) {
        this.modal.data = Object.assign({}, detail)
        this.modal.visible = true
      }
    },
    mounted () {
      this.getHonorList()
    }
  }
</script>

<style lang="less">
  #page-honor-manage-list {
    .pic {
      width: 300px;
      min-height: 250px;

      .handler {
        position: absolute;
        right: 10px;
        bottom: 10px;
        display: none;
        .ivu-icon {
          margin-right: 10px;
          cursor: pointer
        }
      }

      &:hover .handler {
        display: block
      }
    }

    .ivu-form-item {
      margin-bottom: 0px;
      padding-left: 5px;
      .ivu-form-item-content {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
  }
</style>

